<template>
  <div class="registration-container">
    <!-- 标题区域 -->
    <div class="header">
      <h2>体检订单</h2>
    </div>

    <!-- 基本查询条件区域 -->
    <div class="search-section">
      <h3>查询条件</h3>
      <el-form :model="queryForm" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="订单编号:">
              <el-input v-model="queryForm.orderNo" placeholder="请输入订单编号" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态:">
              <el-select v-model="queryForm.status" placeholder="全部" clearable>
                <el-option label="全部" value="" />
                <el-option
                    v-for="item in statuss"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="套餐:">
              <el-select v-model="queryForm.packageName" placeholder="请选择套餐" clearable>
                <el-option
                    v-for="dept in packageNames"
                    :key="dept.value"
                    :label="dept.label"
                    :value="dept.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="就诊人:">
              <el-input v-model="queryForm.patientName" placeholder="请输入就诊人" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="button-group">
            <el-button @click="resetQuery">重置</el-button>
            <el-button type="primary" @click="handleQuery">查询</el-button>
            <el-button @click="showAdvancedSearch = true">高级查询</el-button>
            <el-button @click="exportData">导出数据</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <!-- 数据列表区域 -->
    <div class="data-section">
      <div class="table-header">
        <h3>数据列表</h3>
        <div class="icon-buttons">
          <el-tooltip content="编辑" placement="top">
            <el-button :icon="Edit" circle plain @click="handleEdit" />
          </el-tooltip>
          <el-tooltip content="行列调整" placement="top">
            <el-button :icon="
            Operation" circle plain @click="handleColumnAdjust" />
          </el-tooltip>
          <el-tooltip content="刷新" placement="top">
            <el-button :icon="Refresh" circle plain @click="handleRefresh" />
          </el-tooltip>
          <el-tooltip content="设置" placement="top">
            <el-button :icon="Setting" circle plain @click="handleSettings" />
          </el-tooltip>
        </div>
      </div>
      <el-table :data="orderData" border style="width: 100%">
        <el-table-column prop="id" v-if="false" />
        <el-table-column prop="orderNo" label="订单编号" width="200" />
        <el-table-column prop="fee" label="订单金额" width="120">
          <template #default="{row}">
            {{ row.fee }}元
          </template>
        </el-table-column>
        <el-table-column prop="patientName" label="体检人" width="120" />
        <el-table-column prop="hospitalName" label="医院" width="180" />
        <el-table-column prop="packageName" label="体检套餐" width="180" />
        <el-table-column prop="appointmentTime" label="下单时间" width="180" />
        <el-table-column  label="就诊日期" width="150">
          <template #default="scope">
            {{ scope.row.timePeriod }}:{{scope.row.startTime}}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="订单状态" width="120">
          <template #default="{row}">
            <el-tag :type="getStatusTagType(row.status)">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template #default="{row}">
            <el-button link type="primary" @click="viewDetails(row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog
          v-model="detailDialogVisible"
          title="订单详情"
          width="800px"
          custom-class="order-detail-dialog"
          center
      >
        <div class="order-detail-container">
          <div class="order-header">
            <h2>订单详情</h2>
            <div class="order-number">
              <strong>订单编号：</strong>{{ currentOrder.orderNo }}
            </div>
          </div>

          <div class="info-sections">
            <!-- 订单信息区域 -->
            <div class="info-section">
              <h2 class="section-title">订单信息</h2>
              <div class="info-grid">
                <div class="info-item">
                  <div class="info-label">下单时间</div>
                  <div class="info-value">{{ currentOrder.appointmentTime }}</div>
                </div>

                <div class="info-item">
                  <div class="info-label">订单金额</div>
                  <div class="info-value">¥{{ currentOrder.fee }}</div>
                </div>

                <div class="info-item">
                  <div class="info-label">订单状态</div>
                  <div class="info-value">
                    <el-tag :type="getStatusTagType(currentOrder.status)" effect="light">
                      {{ getStatusText(currentOrder.status) }}
                    </el-tag>
                  </div>
                </div>

                <div class="divider-row"></div>

                <div class="info-item">
                  <div class="info-label">体检机构</div>
                  <div class="info-value hospital-name">
                    <el-icon class="hospital-icon"><OfficeBuilding /></el-icon>
                    {{ currentOrder.hospitalName }}
                  </div>
                </div>

                <div class="info-item">
                  <div class="info-label">医院地址</div>
                  <div class="info-value">{{ currentOrder.address }}</div>
                </div>

                <div class="info-item">
                  <div class="info-label">医生姓名</div>
                  <div class="info-value">
                    <div class="doctor-name">{{ currentOrder.doctorName || '--' }}</div>
                    <div class="doctor-title">职称: {{ currentOrder.title }}</div>
                  </div>
                </div>
              </div>
            </div> <!-- 正确闭合 info-section -->

            <!-- 体检人信息区域 -->
            <div class="info-section">
              <h2 class="section-title">体检人信息</h2>
              <div class="info-grid">
                <div class="info-item">
                  <div class="info-label">体检人:</div>
                  <div class="info-value">{{ currentOrder.patientName }}</div>
                </div>

                <div class="info-item">
                  <div class="info-label">电话:</div>
                  <div class="info-value">{{ currentOrder.phone }}</div>
                </div>

                <div class="info-item">
                  <div class="info-label">体检时间:</div>
                  <div class="info-value time-highlight">
                    {{ currentOrder.scheduleDate }}:{{ currentOrder.timePeriod }}
                    <el-button
                        type="primary"
                        size="small"
                        @click="showReportDialog"
                        style="margin-left: 10px"
                    >
                      查看报告
                    </el-button>
                  </div>
                </div>

              </div>
            </div>
          </div>
        </div>

        <template #footer>
          <el-button @click="detailDialogVisible = false">返回</el-button>
        </template>
      </el-dialog>
      <!-- 分页插件 ========================================== =============================== -->
      <div class="demo-pagination-block">
        <!--
                    1. current-page  ： 当前页   （重要）
                    2. page-size  : 每页显示条数（重要）
                    3. page-sizes ： 分页类型
                    4. small： 字体大小
                    5. disabled： 是否可用
                    6. background： 按钮颜色
                    7. total： 总数据条数（重要）

            -->
        <el-pagination
            v-model:current-page="pageNum"
            v-model:page-size="pageSize"
            :page-sizes="[2, 3, 4, 5]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"></el-pagination>
      </div>
      <!-- 分页插件 ========================================== =============================== -->

    </div>

    <!-- 高级查询弹窗 -->
    <el-dialog v-model="showAdvancedSearch" title="高级查询" width="50%">
      <el-form :model="advancedQueryForm" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="订单编号:">
              <el-input v-model="advancedQueryForm.orderNo" placeholder="请输入订单编号" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="医院名称:">
              <el-input v-model="advancedQueryForm.hospitalName" placeholder="请输入医院名称" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="就诊人姓名:">
              <el-input v-model="advancedQueryForm.patientName" placeholder="请输入就诊人姓名" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="手机号码:">
              <el-input v-model="advancedQueryForm.phone" placeholder="输入就诊人手机号码" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">

          <el-col :span="12">
            <el-form-item label="订单状态:">
              <el-select v-model="advancedQueryForm.status" placeholder="请选择订单状态" clearable>
                <el-option label="全部" value="" />
                <el-option
                    v-for="item in statuss"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="resetAdvancedQuery">重置</el-button>
          <el-button type="primary" @click="handleAdvancedQuery">查询</el-button>
        </span>
      </template>
    </el-dialog>


    <!-- 报告详情弹窗 -->
    <el-dialog
        v-model="reportDialogVisible"
        title="体检报告"
        width="80%"
        custom-class="report-detail-dialog"
    >
      <div class="report-container">
        <!-- 报告头部 -->
        <div class="report-header">
          <h2>体检报告</h2>
        </div>

        <!-- 体检人信息 -->
        <div class="report-section">
          <h3 class="section-title">体检人信息</h3>
          <div class="patient-info">
            <div class="info-row">
              <div class="info-label">体检人:</div>
              <div class="info-value">{{ currentOrder.patientName }}</div>
            </div>
            <div class="info-row">
              <div class="info-label">手机号:</div>
              <div class="info-value">{{ currentOrder.phone }}</div>
            </div>
            <div class="info-row">
              <div class="info-label">体检日期:</div>
              <div class="info-value">{{ currentOrder.timePeriod }}:{{currentOrder.startTime}}</div>
            </div>
            <div class="info-row">
              <div class="info-label">套餐名称:</div>
              <div class="info-value">{{ currentOrder.packageName }}</div>
            </div>
          </div>
        </div>

        <!-- 体检结论 -->
        <div class="report-section">
          <h3 class="section-title">体检结论</h3>
          <div class="conclusion-content">
            <p>{{ reportData.healthConclusion }}</p>
          </div>
        </div>


        <!-- 检查明细 -->
        <div class="report-section">
          <h3 class="section-title">检查明细</h3>

          <!-- 加载状态提示 -->
          <div v-if="reportLoading" class="loading-container">
            <el-icon class="is-loading" :size="32">
              <Loading />
            </el-icon>
            <p>报告加载中，请稍候...</p>
          </div>

          <template v-else-if="parsedCategories.length">
            <template v-for="(category, index) in parsedCategories" :key="index">
              <!-- 检查区块 -->
              <div class="examination-block">
                <div class="block-header">
                  <h4>{{ category.name }}</h4>
                  <div class="result-indicator">
                    <el-tag :type="getStatusTagType(category.status)">
                      {{ getCategoryStatusText(category.status) }}
                    </el-tag>
                    <span>{{ category.result_summary }}</span>
                  </div>
                </div>
                <div class="examination-grid">
                  <div
                      v-for="(item, itemIndex) in category.items"
                      :key="itemIndex"
                      class="examination-item"
                  >
                    <div class="item-label">{{ item.name }}:</div>
                    <div
                        class="item-value"
                        :class="getStatusClass(item.status)"
                    >
                      {{ item.value }} {{ item.unit || '' }}
                    </div>
                    <!-- 添加项目状态标签 -->
                    <el-tag
                        v-if="item.status !== 'normal'"
                        size="small"
                        :type="getStatusTagType(item.status)"
                        class="item-status-tag"
                    >
                      {{ getCategoryStatusText(item.status) }}
                    </el-tag>
                  </div>
                </div>
              </div>
            </template>
          </template>
          <div v-else class="no-data-hint">
            <el-alert
                title="无检查数据"
                type="info"
                description="当前报告中暂无检查数据"
                :closable="false"
            />
          </div>

          <!-- 温馨提示 -->
          <div class="warning-section">
            <div class="warning-title">温馨提示</div>
            <div class="warning-content">
              此次体检结果，仅对本次查体、检查、检验样本负责。本报告不能用于二次会诊或其他任何医学判断目的使用。
            </div>
          </div>
        </div>
      </div>

      <template #footer>
        <el-button @click="reportDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref, onMounted, reactive, computed} from 'vue'
import { ElMessage } from 'element-plus'
import {Edit, Loading, OfficeBuilding, Operation, Refresh, Setting} from "@element-plus/icons-vue";
import axios from "axios";

const statuss=ref([])
const getStatuss=()=>{
  axios.get(`/appointmentRecord/getStatuss`).then(res=>{
    statuss.value=res.data.obj.map(item=>{
      return {
        label:item,
        value:item
      }
    })
  })
}
// 科室选项
const departments = ref([])
const getDepartments = () => {
  axios.get('/disease/getDiseaseByDepartmentId').then(res => {
    departments.value = res.data.obj.map(item=>({
      value: item.id || item.value || item,
      label:  item.name || item.label || item
    }))
  })
}
//套餐选项
const packageNames = ref([])
const getPackageNames = () => {
  axios.get('/medicalPackage/getPackageNames').then(res => {
    // 确保数据是数组类型
    if (Array.isArray(res.data.obj)) {
      packageNames.value = res.data.obj
          .filter(item => item && (item.id || item.name)) // 过滤有效项
          .map(item => ({
            // 使用套餐ID作为值，如果不存在则使用套餐名称（但确保不是对象）
            value: item.id || String(item),
            // 使用套餐名称作为标签，确保是字符串
            label: item.packageName || item.name || String(item)
          }));
    } else {
      console.error('返回的套餐数据不是数组:', res.data.obj);
      packageNames.value = []; // 设置为空数组避免出错
    }
  }).catch(error => {
    console.error('获取套餐数据失败:', error);
    packageNames.value = []; // 设置为空数组避免出错
  });
}

// 分页模型定义=======================================================================
let pageNum = ref(1);
let pageSize = ref(3);
let total = ref(1);
const small = ref(false);
const background = ref(true);
const disabled = ref(false);
const handleSizeChange = (val) => {
  pageSize.value = val;
  fetchData();
}
const handleCurrentChange = (val) => {
  // 将这个val数字赋值给 pageNum
  pageNum.value = val;
  fetchData();
}
// 分页模型定义=======================================================================

// 获取数据==================================================================
const orderData = ref([])
const fetchData = () => {
  axios.get(`/appointmentRecord/getViewportMent/${pageNum.value}/${pageSize.value}`).then(res=>{
    orderData.value = res.data.obj.data;
    total.value = res.data.obj.total;

  })
}
// 获取数据==================================================================


// 获取状态显示文本========================================
const getStatusText = (status) => {
  const map = {
    unpaid: '未支付',
    paid: '已支付',
    canceled: '已取消'
  }
  return map[status] || status
}

// 获取状态标签类型
const getStatusTagType = (status) => {
  // 确保所有可能的订单状态都有对应的标签类型
  const map = {
    "未支付": "danger",
    // 英文状态也可以处理
    "已支付": "success",
    "paid": "success",        // 如果API返回英文状态
    "已取消": "info",
    "canceled": "info",
    "已完成": "primary"
  };

  // 确保不会返回空值
  return map[status] || "info";  // 设置默认值"info"避免空值
}
const queryForm = reactive({
  status: '',
  orderNo: '',
  packageName: '',
  patientName: ''
})

// 基本查询方法
const handleQuery = () => {
  // 构造符合Hospital对象的查询参数
  const searchParams = {
    status: queryForm.status,
    orderNo: queryForm.orderNo,
    packageName: queryForm.packageName,
    patientName: queryForm.patientName
  }
  axios.post(`/appointmentRecord/searchPagementRecord/${pageNum.value}/${pageSize.value}`, searchParams, {
    headers: {
      'Content-Type': 'application/json'
    }
  }).then(res => {
    orderData.value = res.data.obj.data;
    total.value = res.data.obj.total;
    ElMessage.success('查询成功')
  }).catch(error => {
    ElMessage.error('查询失败: ' + error.message)
  })
}

// 重置基本查询
const resetQuery = () => {
  queryForm.value = {
    orderNo: '',
    status: '',
    packageName: '',
    patientName: ''
  }
  fetchData()
}

// 高级查询方法
// 高级查询弹窗控制
const showAdvancedSearch = ref(false)
const handleAdvancedQuery = () => {
  axios.post(`/appointmentRecord/searchAppointment/${pageNum.value}/${pageSize.value}`, advancedQueryForm.value, {
    headers: {
      'Content-Type': 'application/json'
    }
  }).then(res => {
    orderData.value = res.data.obj.data;
    total.value = res.data.obj.total;
    ElMessage.success('查询成功')
    showAdvancedSearch.value = false
  }).catch(error => {
    ElMessage.error('查询失败: ' + error.message)
  })

}

// 重置高级查询
// 高级查询表单
const advancedQueryForm = ref({})

const resetAdvancedQuery = () => {
  advancedQueryForm.value = {
    orderNo: '',
    hospitalName: '',
    doctorName: '',
    patientName: '',
    phone: '',
    department: '',
    status: ''
  }
}

// 导出数据
const exportData = () => {
  location.href = "http://localhost:8080/appointmentRecord/download2"
  ElMessage.success('导出数据成功')
}




const handleEdit = () => {
  ElMessage.info('编辑功能')
  // 这里可以添加编辑逻辑
}

const handleColumnAdjust = () => {
  ElMessage.info('行列调整功能')
  // 这里可以添加列显示/隐藏控制逻辑
}

const handleRefresh = () => {
  ElMessage.success('数据已刷新')
  fetchData() // 重新获取数据
}

const handleSettings = () => {
  ElMessage.info('设置功能')
  // 这里可以打开设置对话框
}



const detailDialogVisible = ref(false)
const currentOrder = ref({})
// 获取订单详情
const getOrderDetail =(id) => {

  axios.get(`/appointmentRecord/getOrderDetail/${id}`).then(res => {
    currentOrder.value = res.data.obj
    ElMessage.success('获取订单详情成功')
  })
}

// 查看详情
const viewDetails = (row) => {
  console.log('当前行数据:', row); // 检查row对象

  getOrderDetail(row.id)
  detailDialogVisible.value = true
  ElMessage.info(`查看订单 ${row.orderNo} 的详情`)
}


onMounted(() => {
  fetchData();
  getStatuss();
  getDepartments();
  getPackageNames();

})


const reportDialogVisible = ref(false);
// 添加检查数据


const reportLoading = ref(false); // 报告加载状态
// 显示报告弹窗
// 显示报告弹窗
const showReportDialog = () => {
  reportDialogVisible.value = true;
  // 清空之前的报告数据
  reportData.value = {
    healthConclusion: '报告中暂无结论',
    overallStatus: 'normal',
    examDetails: { categories: [] }
  };
  // 获取报告数据
  getReportData();
};
// 模拟来自数据库的体检报告数据
const reportData = ref({});
// 获取报告数据
const getReportData = async () => {
  try {
    reportLoading.value = true;

    // 获取当前订单的预约ID (假设currentOrder.id是appointment_id)
    const appointmentId = currentOrder.value.id;

    // 调用后端API获取报告数据
    const response = await axios.get(`/healthReports/getReportByAppointmentId/${appointmentId}`);

    // 检查响应状态
    if (response.data.code !== 200 || !response.data.obj) {
      throw new Error('获取报告失败，请稍后重试');
    }

    // 赋值报告数据
    reportData.value = response.data.obj;

    // // 设置当前就诊人信息
    // reportData.value.patientName = currentOrder.value.patientName || '-';
    // reportData.value.phone = currentOrder.value.phone || '-';
    // reportData.value.packageName = currentOrder.value.packageName || '-';
    // reportData.value.scheduleDate = currentOrder.value.scheduleDate || '';
    // reportData.value.timePeriod = currentOrder.value.timePeriod || '';

    // 解析检查详情字段
    if (reportData.value.exam_details) {
      try {
        // 将 JSON 字符串解析为 JavaScript 对象
        reportData.value.exam_details = JSON.parse(reportData.value.exam_details);
      } catch (e) {
        console.error("解析检查详情失败", e);
        // 处理解析错误的情况
        reportData.value.exam_details = { categories: [] };
      }
    } else {
      // 如果返回的数据中没有检查详情，创建一个空的结构
      reportData.value.exam_details = { categories: [] };
    }

    // 设置整体状态文本
    // overallStatusText.value = getOverallStatusText(reportData.value.overallStatus);
    // overallStatusClass.value = getOverallStatusClass(reportData.value.overallStatus);

    ElMessage.success('报告数据加载成功');
  } catch (error) {

    ElMessage.error(`获取报告失败: ${error.message || error}`);

    // 设置错误状态
    reportData.value.healthConclusion = '报告获取失败，请稍后重试';
    reportData.value.overallStatus = 'abnormal';
    reportData.value.exam_details = { categories: [] };
  } finally {
    reportLoading.value = false;
  }
};

// 计算属性：解析 JSON 格式的检查详情
const parsedCategories = computed(() => {
  if (reportData.value &&
      reportData.value.exam_details &&
      reportData.value.exam_details.categories &&
      Array.isArray(reportData.value.exam_details.categories)) {
    return reportData.value.exam_details.categories;
  }
  return []; // 返回空数组
});


// 获取状态对应的文本
const getCategoryStatusText = (status) => {
  const map = {
    'normal': '正常',
    'warning': '需关注',
    'abnormal': '异常'
  };
  return map[status] || status;
};

// 获取整体状态文本
const getOverallStatusText  = computed(() => {
  const map = {
    'normal': '整体健康',
    'warning': '部分异常',
    'abnormal': '发现严重问题'
  };
  return map[reportData.value.overallStatus] || reportData.value.overallStatus;
});

// 获取整体状态标签类型
const getOverallStatusClass  = computed(() => {
  const map = {
    'normal': 'el-tag--success',
    'warning': 'el-tag--warning',
    'abnormal': 'el-tag--danger'
  };
  return map[reportData.value.overallStatus] || '';
});

// 根据状态获取样式类
const getStatusClass = (status) => {
  const map = {
    'normal': '',
    'warning': 'warning-status',
    'abnormal': 'abnormal-status'
  };
  return map[status] || '';
};

</script>

<style scoped>
.registration-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  margin-bottom: 20px;
}

.header h2 {
  font-size: 20px;
  color: #333;
  font-weight: bold;
}

.search-section {
  background-color: white;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.search-section h3 {
  font-size: 16px;
  color: #666;
  margin-bottom: 15px;
}

.data-section {
  background-color: white;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.data-section h3 {
  font-size: 16px;
  color: #666;
  margin-bottom: 15px;
}

.button-group {
  text-align: right;
  padding-right: 10px;
}

.el-table {
  margin-top: 10px;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
/* 在style部分添加以下样式 */
.icon-buttons {
  display: flex;
  gap: 8px;
}

.icon-buttons .el-button {
  width: 32px;
  height: 32px;
  padding: 0;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

/* 新增订单详情弹窗样式 */
.order-detail-dialog {
  border-radius: 12px;
  overflow: hidden;
}

.order-detail-container {
  max-width: 100%;
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
}

.order-header {
  padding: 24px 30px;
  background-color: #f8f9fb;
  border-bottom: 1px solid var(--border-color);
}

.order-header h2 {
  font-size: 24px;
  font-weight: 600;
  color: var(--title-color);
  margin-bottom: 8px;
}

.order-number {
  font-size: 16px;
  color: var(--subtitle-color);
}

.order-number strong {
  color: var(--primary-color);
  margin-right: 5px;
}

.info-sections {
  padding: 30px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}

.info-section {
  padding-bottom: 20px;
  border-bottom: 1px dashed var(--border-color);
}

.info-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.section-title {
  position: relative;
  padding-left: 15px;
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 600;
  color: var(--title-color);
}

.section-title:before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  bottom: 5px;
  width: 4px;
  background-color: var(--primary-color);
  border-radius: 2px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.info-item {
  padding: 8px 0;
}

.info-label {
  font-size: 14px;
  color: var(--subtitle-color);
  margin-bottom: 6px;
}

.info-value {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.divider-row {
  grid-column: 1 / -1;
  height: 1px;
  background-color: var(--border-color);
  margin: 15px 0;
}

.hospital-name {
  display: flex;
  align-items: center;
}

.hospital-icon {
  color: var(--primary-color);
  margin-right: 8px;
  font-size: 18px;
}

.doctor-info {
  display: flex;
  align-items: center;
}

.doctor-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #409eff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  font-weight: bold;
  font-size: 18px;
}

.doctor-name {
  font-size: 16px;
  font-weight: 500;
}

.doctor-title {
  font-size: 14px;
  color: var(--subtitle-color);
}

.time-highlight {
  color: var(--primary-color);
  font-weight: bold;
  font-size: 16px;
}

/* 全局变量定义 */
:root {
  --primary-color: #409eff;
  --border-color: #dcdfe6;
  --title-color: #2d405e;
  --subtitle-color: #606266;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .info-grid {
    grid-template-columns: 1fr;
  }
}


.report-detail-dialog .el-dialog__body {
  padding: 0;
}

.report-container {
  padding: 20px;
  background-color: #fff;
}

.report-header {
  text-align: center;
  margin-bottom: 25px;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}

.report-header h2 {
  font-size: 24px;
  font-weight: 700;
  color: #1d4ed8;
  margin: 0;
}

.report-section {
  margin-bottom: 30px;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 20px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 15px;
  border-left: 4px solid #1d4ed8;
  padding-left: 10px;
}

.patient-info {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 15px;
  margin-bottom: 20px;
}

.info-row {
  display: flex;
  align-items: center;
}

.info-label {
  width: 120px;
  font-weight: bold;
  color: #666;
  font-size: 15px;
}

.info-value {
  flex: 1;
  font-size: 16px;
  color: #333;
}

.avatar-container {
  padding: 5px 0;
}

.conclusion-content {
  background-color: #f8f9fc;
  border-radius: 8px;
  padding: 20px;
  font-size: 15px;
  line-height: 1.8;
  color: #444;
}

.examination-block {
  margin-bottom: 25px;
  background-color: #f8f9fc;
  border-radius: 8px;
  padding: 15px;
}

.block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #ddd;
}

.block-header h4 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: #333;
}

.result-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #666;
}

.examination-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}

.examination-item {
  background-color: #fff;
  border-radius: 8px;
  padding: 15px 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.item-label {
  font-size: 14px;
  font-weight: bold;
  color: #666;
  margin-bottom: 8px;
}

.item-value {
  font-size: 15px;
  color: #333;
  font-weight: 500;
}

.warning-section {
  margin-top: 20px;
  background-color: #fff9eb;
  border-radius: 8px;
  padding: 15px;
  border-left: 4px solid #e6a23c;
}

.warning-title {
  font-weight: bold;
  color: #e6a23c;
  margin-bottom: 8px;
  font-size: 15px;
}

.warning-content {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}
</style>